<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 不经过服务器 显示图片的本地预览 -->
  <input type="file">
  <img src="" alt="">
  <script>
    // 1. 获取dom
    const ipt = document.querySelector('input')
    const img = document.querySelector('img')
    // 2. 为file文件域绑定change事件, 监听选择文件了
    ipt.addEventListener('change', e => {
      // console.log(e.target.files) // 上传的文件列表
      console.log(e.target.files[0]) // 上传的文件对象
      const file = e.target.files[0]
      // 3.h5中有一个方法  URL.createObjectURL 基于上传的文件对象生成一个临时地址
      const tmpPath = URL.createObjectURL(file)
      console.log(tmpPath)
      // 4. 将这个临时路径交给img标签的src属性
      img.src = tmpPath
    })

    // 临时路径 只要创建这个地址的页面关闭了, 这个地址也就失效了
  </script>


<!-- 面临的问题: 
      面试 ->> 上班  前一周 看老项目的代码(痛苦) 

      熟悉代码  仓库地址 -> 运行项目-> 待完善的需求(新技术)  bug处理 版本迭代

      新项目->
         立项
         内部开会(无数次的开会)
         产品经理 提需求  先出原型图
         原型图交给ue/ui  设计图
         前端  基于设计图 出页面 (模拟数据自己请求和后端约定好字段) 模拟数据mockjs json-server
         后端  后端出接口  直接联调   
         测试  测试你的代码 提bug 改  提 改


         版本控制 仓库
         设计图 psd
         上线发布


      小公司
         领导
         ui 图
         实现页面
         后端

        外企
        工作单调
        html+css+js 特效

        谦虚 学完算我输


        道阻且长, 行则将至

        很多事不是难以做到才失去了信心, 而是对有些事失去了信心才显得难以做到

  -->
</body>
</html>